<template>
    <div class="app-container">
        <div class="tcl">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <!-- 合格供应商 -->
                <el-tab-pane label="合格供应商" name="first">
                    <el-form label-width="100px" ref="elForm1" :model="formData" :rules="rules" size="medium">
                        <el-row type="flex" align="middle" justify="start" :gutter="15">
                            <el-form-item label="供应商名称" prop="field01">
                                <el-input v-model="formData.field01" placeholder="请输入供应商名称" clearable :style="{width: '100%'}"></el-input>
                            </el-form-item>
                            <el-form-item label="机构类型" prop="field02">
                                <el-input v-model="formData.field02" placeholder="请输入机构类型" clearable :style="{width: '100%'}"></el-input>
                            </el-form-item>
                            <el-form-item size="medium">
                                <el-button type="primary" @click="query1">查询</el-button>
                                <el-button @click="resetFrom1">重置</el-button>
                            </el-form-item>
                        </el-row>
                    </el-form>

                    <el-table stripe v-loading="loading" :data="supplierList">
                        <el-table-column type="index" label="序号" align="center" width="80"/>
                        <el-table-column label="供应商名称" align="center" prop="h_name"/>
                        <el-table-column label="企业性质" align="center" prop="h_quality">
                            <template slot-scope="scope">
                                {{ scope.row.h_quality ? scope.row.h_quality : '---' }}
                            </template>
                        </el-table-column>
                        <el-table-column label="机构类型" align="center" prop="h_institution">
                            <template slot-scope="scope">
                                <el-tag size="small" disable-transitions v-if="scope.row.h_institution">
                                    {{ scope.row.h_institution }}
                                </el-tag>
                                <span v-else>---</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="统一社会信用代码" align="center" prop="h_credit_code"/>
                        <el-table-column label="操作" align="center" > <!--class-name="small-padding fixed-width"-->
                            <template slot-scope="scope">
                                <router-link :to="'detail?hid='+scope.row.hid+'&zr_id=0'">
                                    <el-button size="small" type="primary" v-hasRole="['common','controller']">查看</el-button>
                                </router-link>
                            </template>
                        </el-table-column>
                    </el-table>
                    <pagination
                        v-show="total>0"
                        :total="total"
                        :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize"
                        @pagination="getList"/>
                </el-tab-pane>

                 <!-- 不合格供应商 -->
                 <el-tab-pane label="不合格供应商" name="second">
                    <el-form label-width="100px" ref="elFrom" :model="formData" :rules="rules" size="medium">
                        <el-row type="flex" align="middle" justify="start" :gutter="15">
                            <el-form-item label="供应商名称" prop="field03">
                                <el-input v-model="formData.field03" placeholder="请输入供应商名称" clearable :style="{width: '100%'}"></el-input>
                            </el-form-item>
                            <el-form-item label="机构类型" prop="field04">
                                <el-input v-model="formData.field04" placeholder="请输入机构类型" clearable :style="{width: '100%'}"></el-input>
                            </el-form-item>
                            <el-form-item size="medium">
                                <el-button type="primary" @click="query2">查询</el-button>
                                <el-button @click="resetFrom2">重置</el-button>
                            </el-form-item>
                        </el-row>
                    </el-form>

                    <el-table stripe v-loading="loading" :data="noSupplierList">
                        <el-table-column type="index" label="序号" align="center" width="80"/>
                        <el-table-column label="供应商名称" align="center" prop="h_name"/>
                        <el-table-column label="企业性质" align="center" prop="h_quality">
                            <template slot-scope="scope">
                                {{ scope.row.h_quality ? scope.row.h_quality : '---' }}
                            </template>
                        </el-table-column>
                        <el-table-column label="机构类型" align="center" prop="h_institution">
                            <template slot-scope="scope">
                                <el-tag size="small" disable-transitions v-if="scope.row.h_institution">
                                    {{ scope.row.h_institution }}
                                </el-tag>
                                <span v-else>---</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="统一社会信用代码" align="center" prop="h_credit_code"/>
                        <el-table-column label="操作" align="center" > <!--class-name="small-padding fixed-width"-->
                            <template slot-scope="scope">
                                <router-link :to="'detail?hid='+scope.row.hid+'&zr_id=0'">
                                    <el-button size="small" type="primary" v-hasRole="['common','controller']">查看</el-button>
                                </router-link>
                            </template>
                        </el-table-column>
                    </el-table>
                    <pagination
                        v-show="total1>0"
                        :total="total1"
                        :page.sync="queryParams1.pageNum"
                        :limit.sync="queryParams1.pageSize"
                        @pagination="getList1"/>
                </el-tab-pane>

                 <!-- 供应商不良记录 -->
                 <el-tab-pane label="供应商不良记录" name="third">
                    <el-form label-width="100px" ref="elForm" :model="formData" :rules="rules" size="medium">
                        <el-row type="flex" align="middle" justify="start" :gutter="15">
                            <el-form-item label="供应商名称" prop="field05">
                                <el-input v-model="formData.field05" placeholder="请输入供应商名称" clearable :style="{width: '100%'}"></el-input>
                            </el-form-item>
                            <el-form-item label="机构类型" prop="field06">
                                <el-input v-model="formData.field06" placeholder="请输入机构类型" clearable :style="{width: '100%'}"></el-input>
                            </el-form-item>
                            <el-form-item size="medium">
                                <el-button type="primary" @click="query3">查询</el-button>
                                <el-button @click="resetFrom3">重置</el-button>
                            </el-form-item>
                        </el-row>
                    </el-form>

                    <el-table stripe v-loading="loading" :data="supplierBadList">
                        <el-table-column type="index" label="序号" align="center" width="80"/>
                        <el-table-column label="供应商名称" align="center" prop="h_name"/>
                        <el-table-column label="企业性质" align="center" prop="h_quality">
                            <template slot-scope="scope">
                                {{ scope.row.h_quality ? scope.row.h_quality : '---' }}
                            </template>
                        </el-table-column>
                        <el-table-column label="机构类型" align="center" prop="h_institution">
                            <template slot-scope="scope">
                                <el-tag size="small" disable-transitions v-if="scope.row.h_institution">
                                    {{ scope.row.h_institution }}
                                </el-tag>
                                <span v-else>---</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="状态" align="center" prop="f_state">
                            <template slot-scope="scope">
                                <el-tag size="small" v-if="supplierBadList[scope.$index].f_state==2" type="danger">不合规供应商</el-tag>
                                <el-tag size="small" v-else type="info">黑名单</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center" > <!--class-name="small-padding fixed-width"-->
                            <template slot-scope="scope">
                                <router-link :to="'detail?hid='+scope.row.hid+'&zr_id=0'">
                                    <el-button size="small" type="primary" v-hasRole="['common','controller']">查看</el-button>
                                </router-link>
                            </template>
                        </el-table-column>
                    </el-table>
                    <pagination
                        v-show="total2>0"
                        :total="total2"
                        :page.sync="queryParams2.pageNum"
                        :limit.sync="queryParams2.pageSize"
                        @pagination="getList2"/>
                </el-tab-pane>

                 <!-- 供应商准入 -->
                 <el-tab-pane label="供应商准入" name="fourth">
                    <el-form label-width="100px" ref="elForm" :model="formData" :rules="rules" size="medium">
                        <el-row type="flex" align="top" justify="start" :gutter="15">
                            <el-form-item label="提交时间" prop="field07">
                                <el-date-picker v-model="formData.field07" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="年/月/日" clearable :style="{width: '100%'}"></el-date-picker>
                            </el-form-item>
                            <el-form-item label="发起人" prop="field08">
                                <el-input v-model="formData.field08" placeholder="请输入发起人" clearable :style="{width: '100%'}"></el-input>
                            </el-form-item>
                            <el-form-item size="medium">
                                <el-button type="primary" @click="query4">查询</el-button>
                                <el-button @click="resetFrom4">重置</el-button>
                            </el-form-item>
                        </el-row>
                    </el-form>

                    <el-table stripe v-loading="loading" :data="supplierAccessList">
                        <el-table-column type="index" label="序号" align="center" />
                        <el-table-column label="业务编号" align="center" prop="zr_bnumber">
                            <template slot-scope="scopt">
                                {{ scopt.row.zr_bnumber }}
                            </template>
                        </el-table-column>
                        <el-table-column label="供应商名称" align="center" prop="h_name">
                            <template slot-scope="scope">
                                {{ scope.row.csSupplier.h_name }}
                                <el-tag size="small" style="margin-left: 20px" v-if="scope.row.csSupplier.f_status==2" type="danger">已驳回</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="发起人" align="center" prop="zr_promoter"/>
                        <el-table-column label="提交时间" align="center" prop="zr_time">
                            <template slot-scope="scope">
                                <span>{{ parseTime(scope.row.zr_time,'{y}-{m}-{d} {h}:{i}:{s}') }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                            <template slot-scope="scope">
                                <router-link :to="'process?zr_id='+scope.row.zr_id">
                                    <el-button size="small" v-if="scope.row.csSupplier.f_status==0" v-hasRole="['controller']">审核</el-button>
                                </router-link>
                                <router-link :to="'detail?zr_id='+scope.row.zr_id+'&hid=0'">
                                    <el-button style="margin-left: 10px" size="small" type="primary" v-hasRole="['common','controller']">查看</el-button>
                                </router-link>
                            </template>
                        </el-table-column>
                    </el-table>
                    <pagination
                        v-show="total3>0"
                        :total="total3"
                        :page.sync="queryParams3.pageNum"
                        :limit.sync="queryParams3.pageSize"
                        @pagination="getList3"/>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import{
    listSupplier, //查询合格供应商
    listSupplier1,
    listSupplier2
}from '@/api/system/supplier';
import {listAccess} from "@/api/system/access"
import {parseTime}  from "@/utils/ruoyi"
import moment from "moment";
export default{
    components: {},
    name: 'Supplier',
    data(){
        return{
            activeName: 'first',
            // 遮罩层
            Loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            total1: 0,
            total2: 0,
            total3: 0,
            // 合格供应商表格数据
            supplierList: [],
            // 不合格供应商表格数据
            noSupplierList: [],
            // 供应商不良记录表格数据
            supplierBadList: [],
            // 供应商准入表格数据
            supplierAccessList: [],
            // 弹出层标题
            title: '',
            // 是否显示弹出层
            open: false,
            // 查询参数 分页查询
            queryParams:{
                pageNum: 1,
                pageSize: 10,
                h_name: '',
                h_institution: '',
            },
            queryParams1:{
                pageNum: 1,
                pageSize: 10,
                h_name: '',
                h_institution: '',
            },
            queryParams2:{
                pageNum: 1,
                pageSize: 10,
                h_name: '',
                h_institution: '',
            },
            queryParams3:{
                pageNum: 1,
                pageSize: 10,
                zr_promoter: '',
                zr_time: '',
            },
            // 表单参数
            form: {},
            // 表单验证
            formData:{
                field01: undefined,
                field02: null,
                field03: undefined,
                field04: null,
                field05: undefined,
                field06: null,
                field07: undefined,
                field08: null
            },
            rules: {
                field01: [],
                field02: [],
                field03: [],
                field04: [],
                field05: [],
                field06: [],
                field07: [],
                field08: []
            }
        }
    },
    created(){
        if(sessionStorage.getItem('tag_item')!=null){
            console.log(sessionStorage.getItem('tag_item'))
            this.activeName=sessionStorage.getItem('tag_item')
            sessionStorage.removeItem('tag_item')

            if(sessionStorage.getItem('num')!=null && sessionStorage.getItem('size')!=null){
                this.queryParams.pageNum=JSON.parse(sessionStorage.getItem('num'))
                this.queryParams.pageSize=JSON.parse(sessionStorage.getItem('size'))

                sessionStorage.removeItem('num')
                sessionStorage.removeItem('size')
            }
            if(sessionStorage.getItem('num1')!=null && sessionStorage.getItem('size1')!=null){
                this.queryParams1.pageNum=JSON.parse(sessionStorage.getItem('num1'))
                this.queryParams1.pageSize=JSON.parse(sessionStorage.getItem('size1'))

                sessionStorage.removeItem('num1')
                sessionStorage.removeItem('size1')
            }
            if(sessionStorage.getItem('num2')!=null && sessionStorage.getItem('size2')!=null){
                this.queryParams2.pageNum=JSON.parse(sessionStorage.getItem('num2'))
                this.queryParams2.pageSize=JSON.parse(sessionStorage.getItem('size2'))

                sessionStorage.removeItem('num2')
                sessionStorage.removeItem('size2')
            }
            if(sessionStorage.getItem('num3')!=null && sessionStorage.getItem('size3')!=null){
                this.queryParams3.pageNum=JSON.parse(sessionStorage.getItem('num3'))
                this.queryParams3.pageSize=JSON.parse(sessionStorage.getItem('size3'))

                sessionStorage.removeItem('num3')
                sessionStorage.removeItem('size3')
            }
        }
        this.getList()
        this.getList1()
        this.getList2()
        this.getList3()
    },
    beforeRouteLeave(to,from,next){
        sessionStorage.setItem('tag_item',this.activeName)
        if(this.activeName== 'first'){
            // 存第一个标签参数数据
            sessionStorage.setItem('num',this.queryParams.pageNum)
            sessionStorage.setItem('size',this.queryParams.pageSize)
        }else if(this.activeName=='second'){
            // 存第二个标签参数数据
            sessionStorage.setItem('num1',this.queryParams1.pageNum)
            sessionStorage.setItem('size1',this.queryParams1.pageSize)
        }else if(this.activeName=='third'){
            // 存第三个标签参数数据
            sessionStorage.setItem('num2',this.queryParams2.pageNum)
            sessionStorage.setItem('size3',this.queryParams2.pageSize)
        }else if(this.activeName=='fourth'){
            // 存第四个标签参数数据
            sessionStorage.setItem('num4',this.queryParams3.pageNum)
            sessionStorage.setItem('size4',this.queryParams3.pageSize)
        }
        next(true)
    },
    methods:{
        parseTime,
        dataFormat(row,column){
            let data = row[column.property];
            if(data===undefined){
                return ''
            }
            return moment(data).format("YYYY-MM-DD HH:mm:ss")
        },
        query1(){
            this.loading = true
            this.queryParams.h_name=this.formData.field01
            this.queryParams.h_institution=this.formData.field02
            this.queryParams.pageNum=1
            listSupplier(this.queryParams).then(response =>{
                this.supplierList=response.rows;
                this.total=response.total;
                this.loading=false;
            });
        },
        query2(){
            this.loading = true
            this.queryParams1.h_name=this.formData.field03
            this.queryParams1.h_institution=this.formData.field04
            this.queryParams1.pageNum=1
            listSupplier1(this.queryParams1).then(response =>{
                this.noSupplierList=response.rows;
                this.total1=response.total;
                this.loading=false;
            });
        },
        query3(){
            this.loading = true
            this.queryParams2.h_name=this.formData.field05
            this.queryParams2.h_institution=this.formData.field06
            this.queryParams2.pageNum=1
            listSupplier2(this.queryParams2).then(response =>{
                this.supplierBadList=response.rows;
                this.total2=response.total;
                this.loading=false;
            });
        },
        query4(){
            this.loading = true
            if(this.formData.field07==''||this.formData.field07==undefined){
                this.queryParams3.zr_time=null
            }else{
                this.queryParams3.zr_time=this.formData.field07
            }
            this.queryParams3.zr_promoter=this.formData.field08
            this.queryParams3.pageNum=1
            listAccess(this.queryParams3).then(response=>{
                // console.log(response)
                this.supplierAccessList=response.rows;
                // console.log(this.supplierAccessList)
                this.total3=response.total;
                this.loading=false;

            });
        },
        resetFrom1(){
            this.formData.field01=undefined;
            this.formData.field02=null
        },
        resetFrom2(){
            this.formData.field03=undefined;
            this.formData.field04=null
        },
        resetFrom3(){
            this.formData.field05=undefined;
            this.formData.field06=null
        },
        resetFrom4(){
            this.formData.field07=undefined;
            this.formData.field08=null
        },
        handleClick(tab,event){
            console.log(tab,event)
        },

        getList(){
            this.loading=true
            listSupplier(this.queryParams).then(response =>{
                this.supplierList=response.rows;
                this.total=response.total;
                this.loading=false;
            });
        },
        getList1(){
            this.loading=true
            listSupplier1(this.queryParams1).then(response =>{
                this.noSupplierList=response.rows;
                console.log("DSADSADSDAS",this.noSupplierList)
                this.total1=response.total;
                this.loading=false;
            });
        },
        getList2(){
            this.loading=true
            listSupplier2(this.queryParams2).then(response =>{
                this.supplierBadList=response.rows;
                this.total2=response.total;
                this.loading=false;
            });
        },
        getList3(){
            this.loading=true
            listAccess(this.queryParams3).then(response =>{
                this.supplierAccessList=response.rows;
                console.log(this.supplierAccessList)
                this.total3=response.total;
                this.loading=false;
            });
        }
    }
}
</script>
